<template>
	<view class="container">
			<l-painter isCanvasToTempFilePath @success="paintersuccess" hidden css="width: 350px;height: 440px;background: #0bc4e3 ;padding:20px;border-radius: 20px;">
				<l-painter-view css="width:100%;background: #0bc4e3 ;display:flex;">
					<l-painter-image src="http://pubuimg.cqguanjie.cn/icon/16995189343469.png" css="width: 24px; height: 24px; object-fit: contain;" />
					<l-painter-text  :text="'个人收款'" css="color:#fff;font-size:18px" />
				</l-painter-view>
				<l-painter-view css="background: #fff;border-radius: 20px;width: 310px;height: 310px;margin-top:20px;">
					<l-painter-view css="text-align:center;margin-top:20px;">
						<l-painter-text  :text="'扫一扫,向我付款'" css="color:#000 ;" />
					</l-painter-view>
					<l-painter-view css="margin-top:10px;">
						<l-painter-qrcode css="width: 200px; height: 200px; border-radius: 12rpx;margin:20rpx auto;background: #fff;" :text="data.options.code"></l-painter-qrcode>
					</l-painter-view>
					<l-painter-view css="width:100%;background: #fff ;text-align:center;margin-top:20px;">
						<!-- <l-painter-image :src="data.info.shop_head" css="width: 24px; height: 24px; object-fit: contain;" /> -->
						<!-- <l-painter-text  :text="'让利:'+data.discount" css="color:#000;font-size:14px" /> -->
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		<view class="content" >

			<image :src="data.tempFilePath" mode="aspectFill" style="width: 100%;height: 430px;"></image>
		<!-- 	<view class="qrcode">
				<view class="set">
					<text class="texts" @click="inputDialogToggle">设置金额</text>
					<text class="textss"></text>
					<text class="texts" @click="inputDialogToggles">设置比例</text>
					<text class="textss"></text>
					<text class="texts" @click="inputDialogToggless">设置备注</text>
				</view>
			</view> -->
			<view class="btns" @click="capture">
				保存收款码
			</view>
			<!-- <view class="btns" style="margin-top: 10px;" @click="$goURl('/pages/business/businessOrder')">
				我的核销订单
			</view> -->
		</view>
	<!-- 	<view class="box">
			<view class="top">
				收款记录
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in data.detailsList">
					<view class="items">
						<view class="order">
							备注:{{item.order}}
						</view>
						<view class="source">
							来源:{{item.source.nickname?item.source.nickname:item.source.mobile}}
						</view>

					</view>
					<view class="items">
						<view class="money">
							+{{item.money}}
						</view>
						<view class="time">
							{{$clearTime(item.UpdatedAt)}}
						</view>

					</view>
				</view>
			</view>
			<empty v-if="data.detailsList.length==0"></empty>
		</view> -->
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入金额" value="" type="numer" placeholder="请输入金额"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialogs" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入比例" value="" type="number" placeholder="请输入比例"
				@confirm="dialogInputConfirms"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialogss" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入备注" value="" placeholder="请输入备注"
				@confirm="dialogInputConfirmss"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	const {
		appContext
	} = getCurrentInstance();
	const data = reactive({
		tempFilePath:'',
		page: 0,
		pages: 1,
		size: 10,
		ID:0,
		detailsList: [],
		discount: 0,
		notes: '',
		money: 0,
		options: {
			code: '1', // 生成二维码的值
			img: { // 二维码log配置 非必传
							src: 'https://img.fubaozx.cn/static/oldImg/16994997532841.png', // 图片地址
							size: 80, // 图片大小
							degree: 5, // 圆角大小 如果type为round生效
							type: 'round', //图片展示类型 默认none 可选值  round圆角  circle圆 如果为round 可以传入degree设置圆角大小 默认 5
							color: '#ffffff', //图片周围的白色边框
							width: 10 //图片周围白色边框的宽度 默认5
						},
						// level: 2, //纠错等级 0~4 默认2 非必传
						type: 'none', // 码点 目前只支持 none 其它暂不支持 非必传
						// src: '',//画布背景 非必传
						padding: 0, //二维码margin Number 单位rpx 默认0 非必传
						border: { //二维码边框配置 非必传
							color: ['#FF0C2D', '#FF1E58'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
							opacity: 0, //边框透明度 默认为1不透明 0~1
							lineWidth: 1, //边框宽度
							degree: 0 //边框圆角度数 默认5
						},
						text:{//二维码绘制文字 非必传
								opacity: 0.01, //文字透明度 默认不透明1  0~1 非必传
								font: 'bold 20px system-ui',//文字是否加粗 默认normal 20px system-ui 非必传
								color: ["#000000"], // 文字颜色 多个颜色支持渐变色 默认黑色 非必传
								content: "" //文字内容
						},
						color: ['#FF0C2D', '#FF1E58'], //二维码颜色支持渐变 最多10种颜色 默认黑色 非必传
						// bgColor: "#FFFFFF",//二维码背景色 默认白色 非必传
						size: 360, // 二维码大小 Number 单位rpx 必传
		},
		info:{}
	})
	let qrcode = ref()
	let inputDialog = ref()
	let inputDialogs = ref()
	let inputDialogss = ref()
	let qrcodebox=ref()
	const setup = {
		useCORS: true, // 使用跨域
	};
	onLoad((option) => {

	})
	onShow(() => {
		records()
		modify_info()
	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		records()
	})

function paintersuccess(e){
	data.tempFilePath=e
}
function capture() {
		// #ifdef APP-PLUS
		uni.saveImageToPhotosAlbum({
			filePath: data.tempFilePath,
			success() {
				uni.showToast({
					position: "center",
					icon: "none",
					title: "图片保存成功，请到手机相册查看"
				})
			},
			fail(e) {
				uni.showModal({
					content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
					showCancel: false
				});
			}
		})
		// #endif
		// #ifndef APP-PLUS
		savePicture(data.tempFilePath)
		// #endif
}
	function savePicture(base64) {
			var arr = base64.split(',');
			var bytes = atob(arr[1]);
			let ab = new ArrayBuffer(bytes.length);
			let ia = new Uint8Array(ab);
			for (let i = 0; i < bytes.length; i++) {
				ia[i] = bytes.charCodeAt(i);
			}
			var blob = new Blob([ab], { type: 'application/octet-stream' });
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = new Date().valueOf() + ".png";
			var e = document.createEvent('MouseEvents');
			e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			a.dispatchEvent(e);
			URL.revokeObjectURL(url);
		}

	function modify_info() {
			let shop_id = uni.getStorageSync("userInfo").shop
		appContext.config.globalProperties.$request({
			url: `api/shopInfo/?id=${shop_id}`,
			method: 'get',
			success(res) {
			data.options.code = `https://www.fubaozx.cn/h5/#/pages/personal/wallet/payment?id=${shop_id}&logo=${res.data.shop_head}&name=${res.data.name}&title=${res.data.province+res.data.city+res.data.area+res.data.address}`
			console.log('data.options.code',data.options.code)
			}
		})

	}




	function inputDialogToggle() {
		inputDialog.value.open()
	}

	function dialogInputConfirm(value) {
		if ((typeof Number(value)) !== 'number' || String(Number(value)) == 'NaN') {
			uni.showToast({
				title: '金额须是数字',
				icon: 'none'
			});
			return
		}
		uni.setStorageSync('QRCode',{money:Number(value),discount:data.discount,notes:data.notes})
		data.money = Number(value)
		// data.options.code = data.id + '=' + data.discount + '=' + data.notes + '=' + value
		data.options.code ='/pages/business/pay?id='+ data.id + '&discount=' + data.discount + '&notes=' + data.notes + '&money=' + data.money
		console.log(data.options.code,"data.options.code")
	}

	function inputDialogToggles() {
		inputDialogs.value.open()
	}

	function dialogInputConfirms(value) {

		if ((typeof Number(value)) !== 'number' || String(Number(value)) == 'NaN') {
			uni.showToast({
				title: '请输入数字',
				icon: 'none'
			});
			return
		} else if (Number(value) < 5 || Number(value) > 95) {
			uni.showToast({
				title: '比例要在5-95',
				icon: 'none'
			});
			return
		} else {
		uni.setStorageSync('QRCode',{money:data.money,discount:Number(value),notes:data.notes})
			data.discount = Number(value)
			data.options.code ='/pages/business/pay?id='+ data.id + '&discount=' + data.discount + '&notes=' + data.notes + '&money=' + data.money

		}
	}

	function inputDialogToggless() {
		inputDialogss.value.open()
	}

	function dialogInputConfirmss(value) {
		uni.setStorageSync('QRCode',{money:data.money,discount:data.discount,notes:value})
		data.notes = value
		data.options.code ='/pages/personal/wallet/payment?id='+ data.id + '&discount=' + data.discount + '&notes=' + data.notes + '&money=' + data.money

	}

	function records() {
		if (data.page < data.pages) {
			data.page++
			appContext.config.globalProperties.$request({
				url: `api/record/?page=${data.page}&size=${data.size}&wallet_type=5`,
				method: 'GET',
				success(res) {
					console.log(res,"ss")
					let datas = res.data.data
					datas.forEach((ct) => {
						data.detailsList.push(ct)
					})
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})
		}
	}

</script>

<style lang="scss">
	page {
		// background-color: $color1;
	}

	.container {
		padding: 30upx;
		margin-top: 30px;
		.content {

			.btns {
				background: linear-gradient(270deg, #0bc4e3, #0bc4e3);
				border-radius: 20px;
				font-size: 14px;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #ffffff;
				letter-spacing: 0px;
				padding: 10px 30px;
				text-align: center;
				margin-top: 20px;
			}
			.qrcode {
				background-color: #ffffff;
				border-radius: 10upx;
				padding: 10px;
				margin: 20upx 0;
				.set {
					display: flex;
					justify-content: space-around;
					.texts {
						font-size: 14px;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #ff1542;
						letter-spacing: 0px;
					}

					.textss {
						width: 0;
						height: 15px;
						border: 0.5px solid #d3d3d3;
						margin: 0 30upx;
					}
				}


			}
		}

		.box {
			background-color: #ffffff;
			padding: 30upx;
			border-radius: 30upx;
			margin-top: 30upx;

			.top {
				font-size: 16px;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
				letter-spacing: 0px;
				display: flex;

				image {
					width: 24px;
					height: 24px;
					margin-right: 10upx;
				}
			}

			.list {
				.item {
					display: flex;
					justify-content: space-between;
					margin-top: 30upx;

					.items {
						font-size: 12px;
						color: #666;

						.order {}

						.source {
							margin-top: 10upx;
						}

						.time {}

						.money {
							text-align: right;
							color: #ff0c2d;
							font-size: 18px;
						}
					}
				}
			}
		}
	}
</style>
